<template>
    <div class="box">
        <a-card size="small" title="各类型监测设备利用率" class="center">
            <!-- color 值由组件外部进行传递（会重复修改的部分尽量减少逻辑复杂程度） -->
            <!-- type 值直接传输汉字（没有必要进行判断） -->
            <SmallChartVue :data="store.EquUseRatio" type="利用率" :color="['#66a6ff', '#89f7fe']" />
        </a-card>
    </div>
    <div class="box">
        <a-card size="small" title="各类型监测站在线率" class="center">
            <SmallChartVue :data="store.StationOnlineRatio" type="在线率" :color="['#84fab0', '#8fd3f4']" />
        </a-card>
    </div>
</template>
<script setup>
import SmallChartVue from './SmallChart.vue';
import { onUnmounted } from 'vue';
import { UseRateStore } from './store.js'
const store = UseRateStore();

// 初始化数据加载及获取
store.initData();


// 实时循环刷新数据
var Timer = setInterval(() => {
    store.initData();
}, 2000);

// 注销时，清除循环
onUnmounted(() => {
    clearInterval(Timer);
});
</script>
<style scoped>
.box {
    width: 310px;
    height: 175px;
    margin-bottom: 15px;
}

:deep(.ant-card) {
    background: #191a23;
}

:deep(.ant-card-head-title) {
    color: #fff;
    /* 标题内边距 */
    padding: 12px 0 !important;
    /* 字间距 */
    letter-spacing: 2px;
}

:deep(.ant-card) {
    border: 1px solid rgba(255, 255, 255, 0.1)
}

:deep(.ant-card-body) {
    height: 130px;
    padding: 5px;
}

:deep(.params-name) {
    text-align: left;
    color: rgba(255, 255, 255, 0.5);
}

:deep(.params-value) {
    text-align: right;
    color: #18be6b;
}

:deep(.w-100) {
    width: 100px;
}
</style>